<template>
    <div class="fullPage" >
        <div class="pageHeader">
            <div class="title">
                <i :class="ui.title.icon"></i> <span>{{ui.title.text}}</span>
            </div>
            <div class="filter"></div>
            <div class="acs">
                <ul class="lstAcs">
                    <li><el-button type = "text" @click="refresh"><i class="fa fa-refresh"></i> refresh</el-button></li>
                    <li><el-button type = "text" @click="showDlg(null)"><i class="fa fa-plus"></i> create new</el-button></li>
                </ul>
            </div>
        </div>
        <div class="pageBody">
            <el-table
                :data="rowDatas"
                style="width: 100%"
                :height="ui.tabHeight"
            >
                <el-table-column
                    v-for = "(col, colIndex) in ui.tabCols"
                    :key="colIndex"
                    :prop="col.pro"
                    :label="col.lab"
                    :width="col.width"
                ></el-table-column>
                <el-table-column
                    prop="localLongValue"
                    label="LocalLongValue"
                    width=""
                ></el-table-column>
                <el-table-column
                    fixed="right"
                    label="Action"
                    width="160">
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="showDlg(scope.row)"
                        type="text"
                        size="small">
                        <i class="fa fa-edit"></i> edit
                        </el-button>
                        <el-button
                        @click.native.prevent="deleteRow(scope.row)"
                        type="text"
                        size="small">
                        <i class="fa fa-close"></i> remove
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            :title="ui.title.text"
            :visible.sync="editDlg.show"
            width="700px"
            >

                <div class="formEditPan">
                    <div class="editRow">
                        <div class="lab">order</div>
                        <div class="edit">
                            <el-input v-model="editDlg.editInfo.order"></el-input>
                        </div>
                    </div>
                    <div class="editRow">
                        <div class="lab">class</div>
                        <div class="edit">
                            <el-input v-model="editDlg.editInfo.class"></el-input>
                        </div>
                    </div>
                    <div class="editRow">
                        <div class="lab">code</div>
                        <div class="edit">
                            <el-input v-model="editDlg.editInfo.code"></el-input>
                        </div>
                    </div>
                    <div class="editRow">
                        <div class="lab">value</div>
                        <div class="edit">
                            <el-input v-model="editDlg.editInfo.value"></el-input>
                        </div>
                    </div>
                    <div class="editRow">
                        <div class="lab">localValue</div>
                        <div class="edit">
                            <el-input v-model="editDlg.editInfo.localValue"></el-input>
                        </div>
                    </div>
                    <div class="editRow">
                        <div class="lab">longValue</div>
                        <div class="edit">
                            <el-input v-model="editDlg.editInfo.longValue"></el-input>
                        </div>
                    </div>
                    <div class="editRow">
                        <div class="lab">localLongValue</div>
                        <div class="edit">
                            <el-input v-model="editDlg.editInfo.localLongValue"></el-input>
                        </div>
                    </div>
                </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editDlg.show = false" type = "warning" style="float:left"><i class="fa fa-reply"></i> Cancel</el-button>
                <el-button type="primary" @click="save"><i class="fa fa-save"></i> OK</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
  mounted () {
    var me = this
    try {
      me.init()
    } catch (er) {
      console.log(er)
    }
  },
  data () {
    return {
      sqls: {
        getItems: 'squ/baseData/commonCode/getItems',
        newItem: 'squ/baseData/commonCode/create',
        deleteItem: 'squ/baseData/commonCode/delete',
        editItem: 'squ/baseData/commonCode/edit'
      },
      ui: {
        title: {
          text: 'Common Code / 公共代码',
          icon: 'fa fa-file-code-o subIcon'
        },
        tabHeight: 200,
        tabCols: [
          { pro: 'order', lab: 'Order', width: 60 },
          { pro: 'commonCodeId', lab: 'ID', width: 60 },
          { pro: 'class', lab: 'Class', width: 160 },
          { pro: 'code', lab: 'Code', width: 100 },
          { pro: 'value', lab: 'Value', width: 260 },
          { pro: 'localValue', lab: 'LocalValue', width: 240 },
          { pro: 'longValue', lab: 'LongValue', width: 260 }
        ]

      },
      rowDatas: [],
      editDlg: {
        show: false,
        index: 0,
        editInfo: {
          class: '',
          code: '',
          localLongValue: '',
          localValue: '',
          longValue: '',
          order: 0,
          value: '',
          commonCodeId: 0
        }
      }
    }
  },
  methods: {
    init () {
      var me = this
      try {
        me.$nextTick().then(_ => {
          var h = (document.getElementsByClassName('pageBody')[0]).offsetHeight
          me.ui.tabHeight = h
          me.refresh()
        })
      } catch (er) {
        console.log(er)
      }
    },
    refresh () {
      var me = this
      return new Promise((success, faild) => {
        try {
          me.editDlg.show = false
          var key = me.sqls.getItems
          var ps = {}
          me.sys.query(key, ps).then(res => {
            me.rowDatas = res
            success()
          })
        } catch (er) {
          console.log(er)
          success()
        }
      })
    },
    showDlg (dataRow) {
      var me = this
      try {
        if (dataRow && dataRow != null) {
          me.editDlg.editInfo = dataRow
        } else {
          me.editDlg.editInfo = {
            class: '',
            code: '',
            localLongValue: '',
            localValue: '',
            longValue: '',
            order: 0,
            value: '',
            commonCodeId: 0
          }
        }
        me.editDlg.show = true
      } catch (er) {
        console.log(er)
      }
    },
    save () {
      var me = this
      try {
        var key = me.editDlg.editInfo.commonCodeId && me.editDlg.editInfo.commonCodeId > 0 ? me.sqls.editItem : me.sqls.newItem
        var ps = me.editDlg.editInfo
        me.sys.query(key, ps).then(res => {
          if (res.rowcount > 0) {
            me.$message({
              message: 'save action success.',
              type: 'success'
            })
            me.editDlg.show = false
            me.refresh()
          } else {
            me.$message.error('save action faild!')
          }
        })
      } catch (er) {
        console.log(er)
      }
    },
    deleteRow (row) {
      var me = this
      try {
        me.$confirm('此操作将永久删除该公共代码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var ps = {
            commonCodeId: row.commonCodeId
          }
          me.sys.query(me.sqls.deleteItem, ps).then(res => {
            if (res.rowcount > 0) {
              me.$message({
                message: 'delete action success.',
                type: 'success'
              })
              me.refresh()
            } else {
              me.$message.error('delete  action faild!')
            }
          })
        })
      } catch (er) {
        console.log(er)
      }
    }
  }

}
</script>

<style lang="less" scoped>
    @import url('../module.less');

</style>
